<!-- 设备日志 弹窗 -->
<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		v-model="props.visible"
		title="设备日志"
		@close="handelClose"
		fullscreen
		destroy-on-close
	>
		<el-descriptions class="margin-top" :column="6" border>
			<el-descriptions-item>
				<template #label> 设备地址</template>
				{{ getAddress(curDevice) }}
			</el-descriptions-item>

			<el-descriptions-item>
				<template #label> 设备编号 </template>
				{{ curDevice.deviceCode }}
			</el-descriptions-item>
		</el-descriptions>

		<div class="main">
			<el-card shadow="hover">
				<template #header>
					<div class="card-header">
						<span>巡检日期</span>
					</div>
				</template>

				<div class="logList">
					<div
						class="item"
						v-for="(item, index) in data.checkDateList"
						:key="index"
						:class="{ on: index == data.selectDate }"
						@click="dateClick(index, item.day)"
					>
						{{ item.day.split(' ')[0] }}
					</div>
				</div>
			</el-card>

			<el-card shadow="hover" class="right">
				<el-scrollbar>
					<fieldset>
						<legend>图片</legend>
						<div class="viewBox">
							<div class="viewItem" v-for="(item, index) in data.dataListImg" :key="item.id">
								<el-image
									:preview-src-list="data.dataListImgView"
									style="width: 100%; height: 100%"
									:initial-index="index"
									:title="getFileUrl(item.url)"
									:src="getFileUrl(item.url)"
									loading="lazy"
									:lazy="true"
								>
									<template #error>
										<!-- <img src="/@/assets/img/loadFail.jpg" /> -->
									</template>
								</el-image>
							</div>
						</div>
					</fieldset>

					<fieldset>
						<legend>视频</legend>
						<div class="viewBox">
							<div class="viewItem" v-for="item in data.dataListVideo" :key="item.id">
								<video :src="getFileUrl(item.url || '')" width="100%" controls :autoplay="false" preload="none">您的浏览器不支持 video 标签。</video>
							</div>
						</div>
					</fieldset>
				</el-scrollbar>
			</el-card>
		</div>
	</el-dialog>
</template>

<script lang="ts" setup name="logView">
import { onMounted, reactive } from 'vue';
import { useSmoke } from '/@/hook/index';
import deviceApi from '/@/api/smoke/device';
const { getAddress, getFileUrl } = useSmoke();

const props = defineProps({
	visible: {
		type: Boolean,
		default: false,
	},
	curDevice: {
		type: Object,
		default: function () {
			return {};
		},
	},
});

const emit = defineEmits(['close']);

const data = reactive({
	checkDateList: <any>[],
	dataList: <any>[],
	dataListImg: <any>[],
	dataListImgView: <any>[],
	dataListVideo: <any>[],
	selectDate: 0,
});

onMounted(() => {
	getSelectDate();
});

function handelClose() {
	emit('close');
}

// 获取日期
function getSelectDate() {
	let params = {
		deviceCode: props.curDevice.deviceCode,
	};

	deviceApi.getLogDate(params).then((res: any) => {
		data.checkDateList = res.data.list;
		// 获取巡检数据
		getCheckData(res.data.list[0].day);
	});
}

// 点击日期
function dateClick(index: number, day: string) {
	data.selectDate = index;
	data.dataList = [];
	getCheckData(day);
}

// 请求数据
function getCheckData(day: any) {
	let params = {
		day,
		deviceCode: props.curDevice.deviceCode,
	};

	deviceApi.getDeviceCheckData(params).then((res: any) => {
		data.dataList = res.data.list.filter((item: any) => item.url != '');
		data.dataListImg = data.dataList.filter((item: any) => item.fileType == 1);

		data.dataListImgView = data.dataListImg.map((item: any) => getFileUrl(item.url));
		data.dataListVideo = data.dataList.filter((item: any) => item.fileType == 2);
	});
}
</script>

<style lang="scss" scoped>
.main {
	display: grid;
	position: relative;
	grid-template-columns: 240px 1fr;
	gap: 10px;
	margin-top: 10px;
	height: calc(100vh - 180px);
	overflow: hidden;

	.logList {
		box-sizing: border-box;
		.item {
			padding: 10px;
			font-size: 12px;
			border-radius: 3px;
			margin-bottom: 5px;
			user-select: none; /*用户是否能够选中文本*/
			background: #cdd0d6;
			&.on {
				background: #909399;
				color: #fff;
			}
		}
	}

	.right {
		box-sizing: border-box;
		overflow-y: scroll;

		fieldset {
			border-color: var(--el-border-color-light);
			margin-bottom: 30px;

			legend {
				margin-left: 20px;
				padding: 0 10px;
			}
		}
	}
	.viewBox {
		display: grid;
		gap: 10px;
		// grid-template-columns: repeat(4, 1fr);
		grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
		grid-template-rows: repeat(auto-fill, 1fr);
		justify-items: stretch;
		align-items: center;
		overflow: hidden;
		padding-bottom: 50px;

		.viewItem {
			background: #d4d7de;
			box-sizing: border-box;
			height: auto;
			overflow: hidden;
			position: relative;
			height: 100%;

			img {
				width: 100%;
			}
			video {
				width: 100%;
			}
		}
	}
}

:deep(.el-image__wrapper) {
	position: relative;
}

:deep(.el-card__body) {
	max-height: auto !important;
	padding: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}
</style>
